
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, 
				user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title>待办事项</title>
		<style>
			div{
			    width:100%;
			    height:200px;
			    overflow-x:hidden;
			    overflow-y:auto;
			}
			input{
				width: 300px;
			}
			button{
				color: #fff;
				height: 20px;
				width: 40px;
				background: blueviolet;
				border: 0;
			}
			div{
				border: 1px solid #ccc;
				background: #eee;
				border-radius: 2px;
				margin-top: 20px;
				width:330px;
				padding: 10px;
			}
			body{
				padding: 10%;
				transition: 1s;
			}
			.asd span{
				display: block;
				width: 300px;
				padding-left: 10px;
				margin-bottom: 10px;
				height: 30px;
				background: #ccc;
				font-size: 24px;
				border-radius: 2px;
				position: relative;
				border: 1px solid #999;
			}
			.asd span a{
				font-size: 18px;
				font-family: "楷体";
				color: #cc0000;
			}
			.asd span p{
				position: absolute;
				top: -13px;
				cursor: pointer;
				font-size: 18px;
				right: 2px;
			}
			.gq{
				position: fixed;
				top: 5%;
				left: 50%;
				transform: translate(-50%);
			}
			.gq font{
				font-size: 28px;
			}
		</style>
	</head>
	<body>
		<!--<form action="">-->
			<input class="input" type="text" />
			<button type="button" class="button">提交</button>
		<!--</form>-->
		<div class="asd">
			<span><a href="http://xiao_jiu.gitee.io/qq">你发现了什么秘密？</a><p>×</p></span>
		</div>
		
		<script>
			var ipt = document.querySelector(".input"); 
			var btn = document.querySelector(".button"); 
			var span = document.querySelector("span"); 
			var ad = document.querySelector(".asd")
			var spantwo = document.querySelector("span a"); 
			var spanone = document.querySelector("span p"); 
			btn.addEventListener("click",function(){
				if(ipt.value == ""){
					alert("请输入内容！")
				}else{
					var txt = ipt.value;
					var span=document.createElement("span");
					var a = document.createElement("a");
					var p = document.createElement("p");
					a.innerText = txt;
					p.innerText = "×";
					ad.appendChild(span);
					span.appendChild(a);
					span.appendChild(p);
					a.href="#"
					ipt.value="";
					p.addEventListener("click",function(){
						span.style.display="none";
					})
				}
			})
			ipt.onkeydown = function(e){
			    if(e.keyCode == 13){
			    	if(ipt.value == ""){
						alert("请输入内容！")
					}else{
						var txt = ipt.value;
						var span=document.createElement("span");
						var a = document.createElement("a");
						var p = document.createElement("p");
						a.innerText = txt;
						p.innerText = "×";
						ad.appendChild(span);
						span.appendChild(a);
						span.appendChild(p);
						a.href="#"
						ipt.value="";
						p.addEventListener("click",function(){
							span.style.display="none";
						})
					}
			    }
			}
			spanone.addEventListener("click",function(){
				span.style.display="none";
			})
			
		</script>
		<span class="gq" style="font-size: medium;"><tr>  
    <td colSpan=2 align=right>  
       <font color="#cb6f00" style="font-weight: 900;">  
       当前时间：<span id="d"></span>&nbsp;&nbsp;</font>  
<script language="javascript">  
    window.setInterval("timer()", 1000);  
    function timer(){  
        var currDate = new Date();  
        document.getElementById("d").innerHTML = currDate.toLocaleString();   
    }  
</script>  
    </td></span>  
	</body>
</html>
